<template>
  <div class="money">
    <div class="content">
      <ul class="tabs_box">
        <li 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="currentTab === index ? 'tab_item_active':'tab_item'"
          @click="currentTab = index">{{tab}}</li>
      </ul>
      <div class="tab_box">
        <div v-show="currentTab === 0">
          <total-remain :userinfo="userinfo"/>
          <van-field v-model="amount01" type="number" clearable maxlength="5" label="兑换金额" placeholder="请输入提现金额"/>
          <van-field v-show="userinfo && userinfo.has_g_pwd" clearable v-model="password01" type="password" label="支付密码" placeholder="请输入支付密码"/>
          <div v-show="userinfo && !userinfo.has_g_pwd" class="set_up">
            <span class="pay_title">支付密码</span>
            <van-button round color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" class="set_up_btn"  to="/change_withdrawal_password?title=payment">去设置</van-button>
          </div>
          <van-button class="confirm" @click="amountChange" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>确定</van-button>
        </div>
        <div v-show="currentTab === 1">
          <total-money :userinfo="userinfo" @refresh-click="refreshClick"/>
          <h3 class="recharge_title">选择充值金额</h3>
          <ul class="item_box">
            <li 
              v-for="(item, index) in list" 
              :key="index" 
              class="list_item"
              @click="tabsClick(index)">
              <van-button 
                class="item_btn" 
                :color="currentIndex === index?'#FF5543':''">{{item}}</van-button>
            </li>
            <li class="list_item field_box">
              <van-field 
                v-model="value02" 
                type="number"
                maxlength="5"
                placeholder="自定义金额（100-99999）" 
                class="text_field" 
                @click="tabsClick(6)"
                @input="onChange"
                input-align="center"
                :class="currentIndex === 6?'item_btn_active':''"/>
            </li>
          </ul>
          <h3 class="recharge_title">选择支付方式</h3>
          <ul class="payment_box">
            <li 
              v-for="(item, index) in modeList" 
              :key="index"
              :class="payment === index?'payment_active':'payment'"
              @click="paymentClick(index)">
              <van-image class="pay_icon" width="48" height="48" :src="item.icon"/>
              <div>
                <span>{{item.text}}</span>
                <span class="pay_text_02">{{item.text02}}</span>
              </div>
            </li>
          </ul>
          <van-button @click="paymentConfirm" class="confirm" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>确定支付</van-button>
        </div>
        <div v-show="currentTab === 2">
          <van-field v-model="username03" type="text" label="用户名" placeholder="请输入用户名"/>
          <van-field v-model="begin_time" type="text" label="开始时间" placeholder="请选择开始时间"/>
          <van-field v-model="end_time" type="text" label="结束时间" placeholder="请选择结束时间"/>
          <van-button class="confirm" color="linear-gradient(314deg,#ff5e39 10%, #ff8210 87%)" round>查询</van-button>
          <table>
            <tr>
              <th>账号</th>
              <th>充值类型</th>
              <th>金额</th>
              <th>时间</th>
            </tr>
            <tr 
              v-show="record !== null" 
              v-for="(item, index) in record" 
              :key="index">
              <td>{{item.tgid}}</td>
              <td>{{type_arr[item.typeid]}}</td>
              <td>{{item.total}}</td>
              <td>
                <span>{{item.logtime | fnDate}}</span>
                <span>{{item.logtime | fnDateTime}}</span>
              </td>
            </tr>
            <tr v-show="record === null">
              <td></td>
              <td>暂无数据</td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="tips" v-show="currentTab !== 2">
      <p style="color: #ff0000">温馨提示：</p>
      <p style="color: #ff0000">提现余额兑换不收取手续费，兑换后不可退换，支付宝、微信在线充值手续费限时免费中！</p>
      <p>扫码转账操作说明：点击获取收款码->转账后联系对接->提供转账截图和id</p>
      <!-- <p>
        微信收款码: 
        <van-button color="#ff5e39" round class="pay_btn" @click="showClick(3)">获取收款码</van-button>
      </p> -->
      <p>
        支付宝收款码: 
        <van-button color="#ff5e39" round class="pay_btn" @click="showClick(2)">获取收款码</van-button>
      </p>
      <p>转账后联系对接加币</p>
      <p>附带转账截图+代理id</p>
      <p>（加币时间：早9--晚23，其他时间不加币）</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getBalanceCash, getHomePage, getRedeemVoucher } from '../../../network/home'
import TotalRemain from './childComps/TotalRemain.vue'
import TotalMoney from './childComps/TotalMoney.vue'
import loginValidate from '../../../mixins/loginValidate'
import { getQueryString } from '../../../common/common'
export default {
  // mixins: [loginValidate],
  components: {
    TotalRemain,
    TotalMoney,
  },
  data() {
    return {
      tabs: ['余额兑换', '自助充值'],
      list: [100, 500, 1000, 3000, 5000, 10000],
      modeList: [{
        text: '支付宝支付',
        text02: '',
        // text02: '（费率1%）',
        icon: require('../../../assets/img/charge/alipay02.png'),
        type: 2
      },{
        text: '微信支付',
        // text02: '（费率1%）',
        text02: '',
        icon: require('../../../assets/img/charge/wechat02.png'),
        type: 3
      },],
      payment: 0,
      currentIndex: 0,
      currentTab: 0,
      amount01: '',
      amount02: '',
      value02: '',
      password01: '',
      show: false,
      username03: '',
      begin_time: '',
      end_time: '',
      paytype: 2,
      record: [{
          a_id: "859",
          id: "24",
          logtime: "1635903670",
          remark: "测试",
          remote_order_sn: "",
          tgid: "ca00000",
          total: "100.00",
          typeid: "3",
          uid: "1",
        },{
          a_id: "0",
          id: "23",
          logtime: "1635843027",
          remark: "",
          remote_order_sn: "13",
          tgid: "ca00000",
          total: "-1.00",
          typeid: "2",
          uid: "1",
        },{
          a_id: "0",
          id: "22",
          logtime: "1635842862",
          remark: "",
          remote_order_sn: "12",
          tgid: "ca00000",
          total: "-1.00",
          typeid: "2",
          uid: "1",
        }],
      type_arr: {1: "储值获取", 2: "代充消耗", 3: "后台添加", 4: "提现获得", 5: "人工打款"},
      userinfo: null,
    }
  },
  created () {
    const uid = getQueryString('tgid')
    const token = getQueryString('token')
    if (uid && token) {
        this.$cookies.set('tgid', uid, '1d')
        this.$cookies.set('token', token, '1d')
    }
    this.getDate()
    this.amount02 = this.list[this.payment];
  },
  methods: {
    getDate() {
      getHomePage().then(res => {
        if(res.state === 'ok') {
          console.log(res)
          this.userinfo = res.data
          // this.userinfo.tgid = this.$cookies.get('tgid')
        } else if (res.state === 'err') {
          if(res.msg === 'no_login') {
            this.$toast(res.msg)
            this.$router.replace('/login')
          }else {
            this.$toast(res.msg)
          }
        }
      })
    },
    refreshClick() {
      this.getDate()
    },
    browserRedirect() {
      var sUserAgent = navigator.userAgent.toLowerCase();
      if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
      //跳转移动端页面
      return 'mob'
      } else {
      //跳转pc端页面
      return 'pc'
      }
    },
    tabsClick(index) {
      if (index === 6) {
        this.currentIndex = index
        this.amount02 = ''
      }else {
        this.currentIndex = index
        this.amount02 = this.list[this.currentIndex]
      }
    },
    paymentClick(val) {
      this.payment = val
      this.paytype = this.modeList[val].type
    },
    onChange(val) {
      this.amount02 = parseFloat(val)
    },
    showClick(val) {
      this.$emit('show-click', val)
    },
    amountChange() {
      if (!this.amount01) return this.$toast('请输入提现金额~')
      if (!this.password01) return this.$toast('请输入提现密码~')
      getBalanceCash(this.amount01,this.password01).then(res => {
        if (res.state === 'ok') {
          this.$toast('提现成功')
          this.getDate()
          this.empty()
        }else{
          this.$toast(res.msg)
        }
        this.value = ''
        this.password = ''
      })
    },
    paymentConfirm() {
      if (this.amount02 < 100) return this.$toast('输入金额过低!')
      if(this.browserRedirect() === 'pc') {
        return this.$emit('pay-url-code',this.amount02, this.paytype)
      }
      getRedeemVoucher(this.amount02, this.paytype).then(res => {
        if(res.state === 'ok') {
          window.location.href = res.data.pay_url
        }else if (res.state === 'err') {
          if (res.msg === 'no_login') {
            this.$toast(res.msg)
            this.$router.replace('/login')
          } else {
            // if (this.browserRedirect() === 'mob' && this.paytype === 3) {
            //   return this.showClick(this.paytype)
            // }else if (this.browserRedirect() === 'pc') {
            //   return this.showClick(this.paytype)
            // }
            this.$toast(res.msg)
          }
        }
      })
    },
    empty() {
      this.amount01 = ''
      this.password01 = ''
    }
  },
}
</script>

<style lang="less" scoped>

.money {
  height: 100%;
  background: #fff;
}

.content {
  box-sizing: border-box;
  padding: 40px 30px;
  margin: 0 auto 50px;
  width: 686px;
  height: auto;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
}

.tabs_box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #222;
  .tab_item {
    font-size: 26px;
    font-weight: 500;
    padding: 0 10px;
  }
  .tab_item_active {
    font-size: 32px;
    font-weight: 600;
    padding: 0 10px;
    position: relative;
  }
  .tab_item_active::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    width: 60px;
    height: 6px;
    background: #ff5543;
  }
}

.tab_box {
  padding-top: 40px;
}

.van-field {
  font-size: 28px;
  height: 86px;
  padding: 0 40px;
  line-height: 86px;
  background: #F3F3F3;
  border-radius: 20px;
  margin-bottom: 20px;
}

.game_list {
  display: flex;
  align-items: flex-start;
  .btn {
    padding: 0;
    width: 120px;
    height: 86px;
    border-radius: 20px;
    margin: 0;
    font-size: 26px;
    margin-left: 36px;
  }
}

.game_tips {
  font-size: 22px;
  color: #FF5543;
  margin-bottom: 20px;
}

.tips_right {
  text-align: right;
}

.confirm {
  width: 550px;
  height: 86px;
  margin: 0 auto;
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-top: 40px;
}

table {
  margin-top: 60px;
  width: 626px;
  height: auto;
  background: #F3F3F3;
  border-radius: 20px;
  tr {
    width: 626px;
    display: flex;
    align-items: center;
    height: 86px;
    font-size: 24px;
    color: #222;
    border-bottom: 1px solid #fff;
    th {
      flex: 1;
    }
    td {
      flex: 1;
      text-align: center;
      span {
        display: inline-block;
      }
    }
  }
  tr:nth-child(1) {
    background: #7974FF;
    border-radius: 20px 20px 0px 0px;
    font-size: 28px;
    color: #fff;
    border: 0;
  }
  tr:last-child {
    border: 0;
  }
}

.recharge_title {
  font-size: 32px;
  color: #222;
  margin: 0;
}

.item_box {
  margin-top: 30px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid #f3f3f3;
}

.list_item {
  width: 190px;
  height: 86px;
  margin-bottom: 20px;
}

.item_btn {
  width: 190px;
  height: 86px;
  border-radius: 20px;
  font-size: 30px;
  color: #999;
  background: #F3F3F3;
  border: 2px solid #c9c9c9;
}

.text_field {
  width: 626px;
  height: 86px;
  background: #f3f3f3;
  border-radius: 20px;
  padding: 0;
  line-height: 86px;
  font-size: 26px;
}

.item_box .field_box .field_amount {
  display: inline-block;
  width: 130px;
}

.item_btn_active {
  border: 2px solid #FF5543;
  color: #FF5543;
}

.payment_box {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  color: #222;
  font-weight: 600;
  .payment {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 19px 0 19px 10px ;
    width: 300px;
    height: 86px;
    border: 2px solid #f3f3f3;
    background: #f3f3f3;
    border-radius: 20px;
  }
  .payment_active {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 19px 0 19px 10px ;
    width: 300px;
    height: 86px;
    background: #ffffff;
    border: 2px solid #48b338;
    border-radius: 20px;
    position: relative;
  }
  .payment_active::before {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 34px;
    height: 34px;
    background: url('../../../assets/img/charge/icon_active02.png') no-repeat;
    background-size: 100%;
  }
  .pay_icon {
    margin-right: 20px;
  }
  .pay_text_02 {
    font-size: 18px;
    color: #999;
    font-weight: 400;
  }
}

.tips {
  padding: 30px;
  line-height: 40px;
  color: #333;
  text-align: left;
  font-size: 24px;
}

.pay_btn {
  font-size: 24px;
  color: #FF5543;
  width: 180px;
  height: 40px;
}

.set_up {
  width: 546px;
  height: 86px;
  background: #f3f3f3;
  border-radius: 20px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  .pay_title {
    font-size: 28px;
    color: #646566;
    padding-right: 75px;
  }
  .set_up_btn {
    font-size: 24px;
    width: 150px;
    height: 48px;
  }
}
</style>